
<style lang="scss" scoped>
.container {
  padding: 0 16px;
  // .upload-demo{
  // 	width: 150px;
  // 	.el-upload {
  // 		display: inline-block;
  // 		text-align: center;
  // 		cursor: pointer;
  // 		outline: none;
  // 	}
  // }
}

.el-select .el-select--small {
  display: block !important;
}
</style>

<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 主体区 -->
    <div class="container">
      <!-- 表单区 -->
      <div class="form-data-box">
        <el-form :model="formBean" :rules="validateRules" ref="form1" label-width="120px" class="ruleForm" style="width: 80%;">
          <el-row style="margin-top: 18px;">
            <el-col :span="24">
              <el-form-item label="文件导入" prop="operateFileName">
                <div class="fxrow">
                  <el-input :readonly="readOnly" v-model="formBean.fileName"></el-input>
									<el-upload class="upload-demo" action="" :before-upload="beforeupload"
										multiple :limit="1" :show-file-list="false" accept=".csv,.xls,.xlsx,.et,.ett,.xlt">
										<el-button size="small" type="primary" style="vertical-align: top;" @click="clearUpload" :disabled="readOnly">点击上传</el-button>	
									</el-upload>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表单区END -->
      <!-- 按钮操作区 -->
      <span slot="footer" class="form-btn-box">
        <el-button v-if="!readOnly" type="primary" @click="submitForm()" v-loading.fullscreen.lock="fullscreenLoading">提 交</el-button>
        <el-button @click="cnacelForm('form1')">取 消</el-button>
      </span>
      <!-- 按钮操作区END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 提交表单的loading设置标识
      fullscreenLoading: false,
      firstLoadedData: "{}",
      // 新增用户表单信息
      formBean: {
        fileName: "" //上传图片
      },
      // 表单校验规则
      validateRules: {
        fileName: [
          { required: true, message: "请选择文件", trigger: "blur" }
        ]
      },
      // 表单只读状态
      readOnly: false,
      // 查询出的表格数据
      file: null,
      downloadFileUrl: "",
    };
  },
  props: {
    sourceData: {
      required: true
    }
  },
  // 进入页面加载数据
  mounted() {
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.initFormData();
    },

    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancel", this.cancelData);
    },
 
    /**
     *初始化加载表单数据
     */
    initFormData() {
      
    },
    
    beforeupload(file){
        this.file = file;
        this.$set(this.formBean, "fileName", file.name);
        return false;
    },

    clearUpload(){
        console.log("clearUpload");
        this.$set(this.formBean, "fileName", "");
        this.file = null;
    },

    /**
     * 提交表单
     * @augments formName 表单名称
     */
    submitForm(e) {
      //
      this.$refs["form1"].validate(valid => {
        if (valid) {
          let uploadForm = new FormData();
          uploadForm.append("file", this.file);
          // 表单校验成功
          var url = "/rps/eopDataApply/importFile/?"+new Date().getTime();
          //
          // 开启提交表单的loading
          this.fullscreenLoading = true;
          this.$axios
            .post(url, uploadForm, {
              headers: {
                operator: this.$util.getLoginer().userid,
                withCredentials: true
              }
            })
            .then(res => {
              let data = res.data;
              // 关闭提交表单的loading
              this.fullscreenLoading = false;
              if (data.success) {
                this.$message({
                  message: "导入成功",
                  type: "success"
                });
                this.$emit("ok", {});
              } else {
                this.$error(data.message);
              }
            })
            .catch(err => {
              this.fullscreenLoading = false;
            });
        } else {
          // 表单校验失败
          // this.$error("数据校验失败.");
        }
      });
    },
  }
};
</script>
